<template>
  <div class="index">
    <ul>
      <li v-for="item in data" :style='{background:item.isError?"rgb(231 98 98)":"#258125",marginBottom:"20px",fontSize:"20px"}'>
        <div style="margin-bottom:20px">todesk:{{item.todesk}}  <button @click="copyToClipboard(item.todesk)">复制</button></div>
        <div style="margin-bottom:20px">日期:{{item.date}}</div>
        <div style="margin-bottom:20px">当前任务:{{item.bz}}</div>
        <button v-if="item.isSendEmail=='1'" @click="resetEmail(item)">已经清空报错</button>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent, onMounted, onUnmounted, ref } from "vue";
import { useAxios } from "@/hooks/useAxios";
import { showConfirmDialog } from "vant";

const data = ref({});
let timer=ref(null)
let map =new Map()
function formatDate(date = new Date()) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}
function resetEmail(val){
  useAxios.post(`/updateEmail/${val.todesk}/${val.date}/0`)
}
function copyToClipboard(text) {
  var textarea = document.createElement('textarea');
  textarea.style.position = 'fixed';
  textarea.style.opacity = 0;
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  document.body.removeChild(textarea);
}
function getData() {
  useAxios.get("/getZh/"+formatDate()).then((res) => {
    let curData = res.data
    curData.map(async val=>{
      if((new Date().getTime() - Number(val.createdAt))/1000>=Number(val.timeout)){
        val.isError = true
        if(val.isSendEmail=="0"){
          useAxios.post(`/updateEmail/${val.todesk}/${val.date}/1`)
          useAxios.get("/sendEmail/"+val.todesk)
        }
      }
    })
    data.value = curData
  });
}
onMounted(() => {
  getData();
  timer.value = setInterval(function () {
    getData();
  }, 3000);
});
onUnmounted(() => {
  clearInterval(timer.value);
});
</script>

<style lang="less" scoped>
.container2 {
  display: flex;
  flex-wrap: wrap;
}
.bar {
  margin: 0 5px;
  width: 30%;
}
.kuai {
  margin: 5px 0;
  padding: 3px 3px;
  font-size: 10px;
  cursor: pointer;
}
.shadong {
  animation-name: shan; /* 动画名称 */
  animation-duration: 2s; /* 动画持续时间 */
  animation-timing-function: ease-in; /* 动画速度曲线 */
  animation-delay: 1s; /* 动画延迟开始时间 */
  animation-iteration-count: infinite; /* 动画重复次数 */
}
@keyframes shan {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
</style>
